﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>JQuery选择器</title>		
	</head>

	<body>
		<h2>这是h2标题</h2>
		<p class="a"> 这是一个p段落</p>
		<p>这是另一个p段落</p>

		<p>列表1：</p>
		<ul>
			<li>Coffee</li>
			<li>Milk</li>
			<li>Tea</li>
		</ul>
		<p>列表2：</p>
		<ul>
			<li>Coffee</li>
			<li>Milk</li>
			<li>Tea</li>
		</ul>

		<table border="1">
			<tr>
				<th>网站名</th>
				<th>网址</th>
			</tr>
			<tr>
				<td>Google</td>
				<td>http://www.google.com</td>
			</tr>
			<tr>
				<td>Baidu</td>
				<td>http://www.baidu.com</td>
			</tr>
			<tr>
				<td>菜鸟教程</td>
				<td>http://www.runoob.com</td>
			</tr>
			<tr>
				<td>淘宝</td>
				<td>http://www.taobao.com</td>
			</tr>
			<tr>
				<td>Facebook</td>
				<td>http://www.facebook.com</td>
			</tr>
		</table>
		<script src="../demo/jquery-1.12.4.min.js"></script>
        <script>
        	$('p.a').hide();
        	$('ul li:first-child').hide();
        	$('tr:odd').css('background','yellow');
        	$('td:even').css({'color':'red','font-weight':'bolder'});
        	
        	/*var trs=document.getElementsByTagName('tr');
        	for(var i=0;i<trs.length;i++){
        		trs[i].style.background=(i%2==0?'white':'yellow');
        	}*/
        </script>
		
	</body>

</html>